{
    let btnLeft = document.getElementById("cptp_1");
    let btnRight = document.querySelector("cptp_2");
    let bannerUl = document.getElementById("cptp1");
    let ctrls = document.getElementById("ctrls1");
    let lis = bannerUl.children ;   // 所有的图片

    let index = 0 ;  // 图片索引，表示当前显示的图片索引

    /* 找所有的兄弟节点的函数 */
    let findSiblings = function( tag ){
        let  child = tag.parentNode.children ; // 找到所有的 子标签，包括 tag
        let  siblings = [] ; // 空数组，存放兄弟们
        for( let i=0 ; i <= child.length - 1 ; i++){
            if(  child[i] === tag ){
                continue;
            }
            siblings.push( child[i] ); // 把兄弟放入数组中。给数组添加元素
        }
        return siblings ; // 返回兄弟节点
    };

    // 去掉兄弟标签的指定类
    let  removeSiblingClass = function( tag, classN ){
        let siblings = findSiblings(tag);
        for( let i=0 ; i <= siblings.length-1 ; i++ ){
            siblings[i].classList.remove( classN );
        }
    };

    let showPic = function( index ){
        // 让对应的图片显示
        lis[index].classList.add("show");
        // 让其他图片隐藏: 让 lis[index] 的兄弟标签都去掉 类show
        removeSiblingClass( lis[index] , "show");

        // 点的切换
        dots[index].classList.add("on");
        removeSiblingClass( dots[index], "on"  );
    };

    // 动态生成span 标签
    for( let i=0 ; i <= lis.length-1 ; i++ ){
        let span = document.createElement("span");
        ctrls.appendChild(span)
    }
    let dots = ctrls.children ;     // 所有的点

    showPic(index );  // 默认显示索引为 0 的图片


    let goLeft = function(event){
        index -- ;
        if( index<0 ){
            index = lis.length - 1 ;
        }
        // 显示图片
        showPic( index );
    };

    let goRight = function(event){
        index ++ ;
        if( index > lis.length-1 ){
            index = 0 ;
        }
        // 显示图片
        showPic( index );
    };

    btnLeft.addEventListener("click", goLeft );
    btnRight.addEventListener("click",goRight);

    // 给点添加 click
    for( let i=0 ; i <= dots.length-1 ; i++){
        dots[i].addEventListener("click",function(){
            index = i ;  // 更改 index 为 i，当前的索引
            showPic( index );
        });
    }
}